<!-- 子组件 CardComponent.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <h3>{{ title }}</h3>
    </div>
    <div class="card-body" v-if="!isCollapsed">
      <p>{{ content }}</p>
    </div>
    <div class="card-footer">
      <!-- 插槽内容 -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const isCollapsed = ref(false)

defineProps(['title', 'content'])

const zk = (isshow: boolean) => {
  isCollapsed.value = isshow
}

watch(isCollapsed, (newVal) => {
  console.log('已更新：', newVal)
})
defineExpose({
  zk
})
</script>

<style lang="scss" scoped>
/* 子组件 CardComponent.vue */
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 1.25rem;
  font-weight: bold;
}

.card-body {
  padding: 15px;
  font-size: 1rem;
}

.card-footer {
  padding: 10px;
  background-color: #f9f9f9;
  text-align: right;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}
</style>
